<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">

    <!-- 导航栏商标 -->
      <span >
        <svg class="icon icon-header" aria-hidden="true" >
          <use xlink:href="#icon-denglu" ></use>
        </svg>
        <a class="navbar-brand" href="/">breakwhile</a>
    </span>

    <!-- 导航入口 -->
    <div>
      <ul class="navbar-nav">
        <!-- 条目 -->
          <li class="nav-item ">
          <a class="nav-link text-info font-weight-bold"  href="{% url 'valentine:520' %}">Valentine</a>
        </li>
       <li class="nav-item">
          <a class="nav-link" href="{% url 'blog:article-create' %}">写文章</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'blog:article-list' %}">文章</a>
        </li>
        {% if user.is_authenticated %}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  {{ user.username }}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href='{% url 'userprofile:edit' user_id=user.id %}'>个人信息</a>
                    <a class="dropdown-item" href="#" onclick="user_delete()">删除用户</a>
                    <a class="dropdown-item" href="{% url 'userprofile:logout' %}">退出登录</a>
                </div>
            </li>
        {% else %}
            <li class="nav-item">
                <a class="nav-link" href="{% url 'userprofile:login' %}">登录</a>
            </li>
        {% endif %}
      </ul>
    </div>

  </div>
</nav>

{% if user.is_authenticated %}
<form
    style="display:none;"
    id="user_delete"
    action="{% url 'userprofile:delete' user.id %}"
    method="POST"
>
{% csrf_token %}
    <button type="submit">发送</button>
</form>
    <script>
        function user_delete() {
            // 调用layer弹窗组件
            layer.open({
                title: "确认删除",
                content: "确认删除用户资料吗？",
                yes: function(index, layero) {
                    $('form#user_delete button').click();
                    layer.close(index);
                },
            })
        }
    </script>
{% endif %}